<template>
  <main id="wrapper">
    <div class="login-box">
      <div class="title">系统登陆</div>
      <el-input v-model="name" placeholder="请输入内容"></el-input>
      <el-input placeholder="请输入密码" v-model="pwd" show-password></el-input>
      <el-button type="primary" @click="login" size="small" class="btn">登陆</el-button>
    </div>
    <div class="doc">
      <span>相关文档</span>
      <button @click="open('https://simulatedgreg.gitbooks.io/electron-vue/content/')">Electron-Vue</button>
      <button @click="open('https://electron.atom.io/docs/')">Electron</button>
      <button @click="open('https://vuejs.org/v2/guide/')">Vue.js</button>
    </div>
    <system-information class="info"></system-information>
  </main>
</template>

<script>
  import SystemInformation from '@/components/LandingPage/SystemInformation'
  export default {
    name: 'login',
    components: { SystemInformation },
    data () {
      return {
        name: 'admin',
        pwd: '123456'
      }
    },
    methods: {
      open (link) {
        this.$electron.shell.openExternal(link)
      },
      login () {
        const user = this.$db.get('user').find({ name: this.name }).value()
        if (user) {
          if (user.password === this.pwd) {
            this.$router.push({ path: '/index', query: { name: user.name } })
          } else {
            this.$message({
              message: '用户名或密码错误',
              type: 'error'
            })
          }
        } else {
          this.$message({
            message: '用户不存在',
            type: 'error'
          })
        }
      }
    }
  }
</script>

<style>
  #wrapper {
    background: #2c3e50;
    height: 100%;
    color: #fff;
  }

  .login-box {
    width: 70%;
    margin: 0 auto;
    padding-top: 10%;
  }
  .login-box input {
    margin-top: 20px;
  }
  .login-box .btn{
    width: 100%;
    margin-top: 20px;
  }
  .title {
    font-size: 20px;
    font-weight: bold;
    padding: 20px 0;
    text-align: center;
  }
  .doc {
    width: 100%;
    /* margin: 0 auto;
    margin-top: 20px; */
    position: absolute;
    bottom: 30px;
    text-align: center;
  }
  .doc button {
    color:#fff;
    font-size: .8em;
    cursor: pointer;
    outline: none;
    padding: 0.75em 2em;
    border-radius: 2em;
    display: inline-block;
    background-color: #4fc08d;
    transition: all 0.15s ease;
    border: 1px solid #4fc08d;
  }
  .info {
    width: 100%;
    position:absolute;
    bottom: 0%;
    text-align: center;
  }
  .login-box .el-input__suffix{
    top: 10px;
  }
  </style>
